<template>
  <div class="main">
    <mainPanel />
    <div :class="animatecss" ref="appcontent">
      <div class="sidebar-control" @click="isSidebar = !isSidebar">
        <span><el-icon :size="14">
            <IconPark :icon="isSidebar ? DoubleRight : DoubleLeft" :stroke-width="3" />
          </el-icon></span>
      </div>
      <div class="sidebar-box">
        <span v-for="item in sidebarRules" :class="isActive(item) ? 'active' : ''" class="sidebar-item"
          @click="handlesidebar(item)">
          <el-tooltip :content="item.name" placement="left" effect="light">
            <el-icon :size="15">
              <IconPark :icon="item.icon" :stroke-width="3" />
            </el-icon>
          </el-tooltip>
        </span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import mainPanel from "./cpns/main-panel.vue";
import IconPark from "@components/IconPark.vue";
import { DoubleLeft, DoubleRight } from "@icon-park/vue-next";
import { ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { sidebarRules, sidebarConfig } from "./config/sidebar-config";
import { userlogout } from "@/api/userapi";

const route = useRoute();
const router = useRouter();

const isSidebar = ref<boolean>(false);
const animatecss = ref<string>("sidebar");

const isActive = (item: sidebarConfig) => {
  return item.path === route.path;
};

const handlesidebar = async (item: sidebarConfig) => {
  if (item.path === "/login") {
    const res = await userlogout();
    if (res.code === 200) {
      ElMessage.success(res.msg);
      router.push({
        path: "/login"
      })
      localStorage.removeItem("token");
    }
  } else {
    router.push(item.path);
  }
};

watch(
  () => isSidebar.value,
  () => {
    if (isSidebar.value) {
      animatecss.value = "sidebar openanimate";
    } else {
      animatecss.value = "sidebar closeanimate";
    }
  }
);
</script>

<style scoped lang="less">
.main {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  position: relative;

  .sidebar {
    position: fixed;
    transform: translateX(30px);
    right: 0px;
    top: 228px;
    display: flex;
    align-items: center;

    .sidebar-control {
      display: flex;
      align-items: center;
      width: 15px;
      height: 40px;
      cursor: pointer;
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
      color: #fff;
      background-color: #2a97d1;
    }

    .sidebar-box {
      display: flex;
      width: 30px;
      flex-direction: column;
      border-radius: 8px 0px 0px 8px;
      border: 1px solid #d8dce5;
      border-right: 0;

      .sidebar-item {
        height: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;

        &.active {
          background-color: #2a97d1;
          color: #fff;
        }

        &:hover {
          background-color: #2a97d1;
          color: #fff;
        }

        &:first-child {
          border-top-left-radius: 8px;
        }

        &:last-child {
          border-bottom-left-radius: 8px;
        }
      }
    }
  }

  @keyframes opensidebar {
    0% {
      transform: translateX(30px);
    }

    25% {
      transform: translateX(22.5px);
    }

    50% {
      transform: translateX(15px);
    }

    75% {
      transform: translateX(7.5px);
    }

    100% {
      transform: translateX(0px);
    }
  }

  @keyframes closesidebar {
    0% {
      transform: translateX(0px);
    }

    25% {
      transform: translateX(7.5px);
    }

    50% {
      transform: translateX(15px);
    }

    75% {
      transform: translateX(22.5px);
    }

    100% {
      transform: translateX(30px);
    }
  }

  .openanimate {
    animation-name: opensidebar;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
  }

  .closeanimate {
    animation-name: closesidebar;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
  }
}
</style>
